<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">管理员列表</Col>
            <Col span="9" :style="{textAlign: 'right'}">
                <Button icon="md-add" @click="addUser">添加管理员</Button>
            </Col>
       </Row>
       <div class="table-box">
           <Table width="100%" :height="height" border :columns="columns" :data="data" :loading="loading"></Table>
           <Page :total="pageTotal" :current="pageCurrent" :page-size="pageSize"
           :page-size-opts="pageSizeOpts" show-sizer class="page" show-total @on-change="changePage" @on-page-size-change="pageSizeChang" />
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var height = this.$util.getClientHeight()-64-51-30-58-15-47;

            // 禁用类型
            var enableType = this.$fieldType.enableType;
            // 管理员类型
            var userType = this.$fieldType.userType;

            var that = this;

            return {
                loading: true,
                height: height,
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 70
                    },
                    {
                        title: '名称',
                        key: 'name',
                        width: 150
                    },
                    {
                        title: '邮箱',
                        key: 'email',
                        width: 150
                    },
                    {
                        title: '创建者',
                        key: 'creator_name',
                        width: 100
                    },
                    {
                        title: '最后登录时间',
                        key: 'last_login_time',
                        width: 170
                    },
                    {
                        title: '角色组',
                        key: 'role_name',
                        width: 150
                    },
                    {
                        title: '状态',
                        key: 'flag',
                        width: 70,
                        render: (h, params) => {
                            var flag = params.row.flag;
                            return h('span', enableType[flag]);
                        }
                    },
                    {
                        title: '管理员类型',
                        key: 'type',
                        width: 120,
                        render: (h, params) => {
                            var type = params.row.type;
                            return h('span', userType[type]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        render: (h, params) => {
                            var flag = params.row.flag ? 0 : 1;
                            var buttonAction = [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: ()=>{
                                                that.editUser(params.row);
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: ()=>{
                                                that.enableUser(params.row);
                                            }
                                        }
                                    }, enableType[flag]),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: ()=>{
                                                that.delUser(params.row);
                                            }
                                        }
                                    }, '删除')
                                ];

                            return h('div', buttonAction);
                        }
                    }
                ],
                data: [],
                pageCurrent: 1,
                pageSize: 15,
                pageSizeOpts: [15, 25, 35],
                pageTotal: 0,
            }
        },
        created: function () {
            // 获取菜单列表信息
            this.getUserList();
        },
        methods: {
            // 获取菜单信息列表
            getUserList(){
                var that = this;
                var pageSize = that.pageSize;
                var pageCurrent = that.pageCurrent;
                that.$util.ajax({
                    that: that,
                    url: '/admin/userlist/',
                    data: {
                        type: 0,
                        pageSize: pageSize,
                        pageCurrent: pageCurrent
                    },
                    success: function(data){
                        that.data = data.data.data;
                        that.pageTotal = data.data.total;
                        that.loading = false;
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 分页页码点击事件
            changePage (param){
                this.pageCurrent = param;
                this.getUserList();
            },
            // 每页显示条数选择事件
            pageSizeChang(param){
                this.pageSize = param;
                this.getUserList();
            },
            // 添加管理员
            addUser(){
                this.$loading.show();
                this.$router.push({
                                    name: 'addUser',
                                    params: {}
                                });
            },
            // 编辑用户
            editUser(params){
                this.$router.push({
                                    path: '/admin/editUser',
                                    query: params
                                });
            },
            // 启用、禁用用户
            enableUser(params){
                var that = this;
                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/admin/enable/',
                    data: {
                        id: params.id,
                        flag: params.flag ? 0:1
                    },
                    success: function(data){
                        that.$Message.info('操作成功！');
                        that.getUserList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                })
            },
            // 删除用户
            delUser(data){
                var that = this;
                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/admin/del/',
                    data: {
                        id: data.id
                    },
                    success: function(data){
                        that.$Message.info('删除成功！');
                        that.getUserList();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                })
            }
        }
    }
</script>
<style scoped>
</style>